import React,  { useEffect, useState } from 'react';
import {
  Modal,
  Card,
  Descriptions,
  Radio,
  Select,
  Space,
  Input,
  Button,
  Checkbox,
} from 'antd'
import trans from '@/utils/translate';
import InfoTitle from '@/components/InfoShow/InfoTitle';
import { getDevice } from './service';


interface Props {
  visible: boolean;
  setVisible: any;
  id: number;
}
interface info {
  label: string;
  value: string;
}
const { Group } = Radio;
const Detail: React.FC<Props> = (props) => {
  const { visible, id, setVisible } = props;
  const [info, setInfo] = useState<info[]>([]);
  const optionsResolution = [
    { label: '1920 * 1080', value: '1920 * 1080' },
    { label: '1280 * 720', value: '1280 * 720' },
    { label: '640 * 480', value: '640 * 480' },
  ]
  useEffect(() => {
    id && getDevice(id).then(res => {
      if (res && res.code === 0) {
        const { id, name, brand, model, ip, proto, port, user, passwd } = res.data.camera;
        const info = [
          { label: trans('device.id'), value: id },
          { label: trans('device.name'), value: name },
          { label: trans('device.brand'), value: brand },
          { label: trans('device.type'), value: '摄像头' },
          { label: trans('device.model'), value: model },
          { label: trans('device.ip'), value: ip },
          { label: trans('device.protocol'), value: proto },
          { label: trans('device.port'), value: port },
          { label: trans('info.userName'), value: user },
          { label: trans('info.password'), value: passwd },
        ];
        setInfo(info);
      }
    })
  }, [id])
  return (
    <Modal
      title={trans('device.detail')}
      width='1200px'
      visible={visible}
      onCancel={()=>setVisible(false)}
      footer={false}
    >
      <Descriptions column={2} bordered  style={{marginBottom: '10px'}} key='value'>
        { info?.map(i => <Descriptions.Item label={i.label}>{i.value}</Descriptions.Item>)}
      </Descriptions>

      {/* <InfoTitle title={'device.video.see'}></InfoTitle>

      <Card>
        <section>
          <aside style={{textAlign:'right'}}>{trans('device.video.tip')}</aside>
          <section style={{display:'flex', justifyContent: 'space-between'}}>
            <section>
              <span>{trans('device.video.resolution.play')}:</span>
              <Group
                style={{marginLeft: '10px'}}
                onChange={() => {}}
                defaultValue='1920 * 1080'
                options={optionsResolution}
                buttonStyle="solid"
                optionType="button"
              ></Group>
            </section>
            <section>
              <Space>
                <span>{trans('device.protocol.transform')}</span>
                <Select></Select>
                <span>{trans('device.port')}</span>
                <Input></Input>
                <Checkbox>{trans('device.audio.start')}</Checkbox>
                <Button type='primary'>{trans('device.audio.start')}</Button>
              </Space>
            </section>
          </section>
          <Card>
            <video></video>
          </Card>
        </section>
      </Card> */}
    </Modal>
  )
}

export default Detail;
